优化 Web 性能：使用正确的方法分离数据

图片是网络上最基本的内容类型之一。他们说，一张图片胜过千言万语。但一不小心，图片大小有时会达到几十兆。

因此，虽然网络图像需要清晰明快，但可以缩小和压缩它们以将加载时间保持在可接受的水平。

在我的网站上，我注意到我的主页的页面大小超过了 1.1MB，其中图片占据了大约 88%，而且我还注意到我提供的图片数量超出了它们需要大的数量（以分辨率），显然，还有很大的改进空间。

我开始阅读 Addy 出色的 Image 电子书，并开始按照他们的建议在我的网站上进行一些图像优化。 ，然后对响应式图像进行了一些研究并加以应用。

这将页面大小减少到 445kb，大约 62%！

什么是图像压缩？

压缩图像就是要减小文件大小网站优化，同时将图像保持在可接受的清晰度范围内，我用它来压缩我网站上的图像。

要使用，请确保已安装 Node.js，然后打开终端窗口，cd 进入项目，然后运行以下命令：

npm install imagemin

然后新建一个名为.js的文件，写入如下内容：

const imagemin = require('imagemin');
const PNGImages = 'assets/images/*.png';
const JPEGImages = 'assets/images/*.jpg';
const output = 'build/images';

您可以更改 、 和 , 的值以匹配您的项目结构。

另外，要进行图片压缩，需要根据要压缩的图片类型安装相应的插件。

JPEG的优点/

JPG最大的特点就是有损压缩。这种高效的压缩算法使其成为一种非常轻量级的图像格式。另一方面，即使被称为“有损”压缩，JPG 的压缩方式仍然是一种高质量的压缩方式：当我们将图像体积压缩到原始大小的 50% 以下时，JPG 仍然可以保持 60% %质量。此外，JPG格式以24位存储单张图像，最多可呈现1600万色，足以满足大部分场景的色彩需求，这决定了压缩前后的质量损失不易被发现通过我们人类的眼睛。意识 - 只要您使用正确的业务场景。

JPG使用场景

JPG适合呈现彩色图片。在我们的日常开发中，JPG图片经常以大背景图片、轮播图片或图片的形式出现。

JPG的缺陷

有损压缩确实很难在上图的轮播图上表现出来，但是在处理矢量图和logo的时候，线条感很强，在色彩对比强烈的图像中，人为压缩造成的图像模糊会很明显。

另外，JPEG图片不支持透明处理，透明图片需要调用PNG来渲染。

使用压缩的jpeg

此处使用的工具可通过 - 插件作为插件使用。你可以通过运行来安装它：

npm install imagemin-mozjpeg

然后将以下内容添加到您的 .js 中：

const imageminMozjpeg = require('imagemin-mozjpeg');
const optimiseJPEGImages = () =>
  imagemin([JPEGImages], output, {
    plugins: [
      imageminMozjpeg({
        quality: 70,
      }),
    ]
  });
optimiseJPEGImages()
  .catch(error => console.log(error));

脚本可以通过在终端中运行 node .js 来运行。这将处理所有 JPEG 图像并将优化版本放在 build/ 文件夹中。

我发现在大多数情况下，设置为 70 会产生足够清晰的图像，但您的项目需求可能会有所不同，您可以自己设置一个合适的值。

默认会生成渐进式jpeg，这会导致图像从低分辨率逐渐加载到高分辨率，直到图像完全加载。由于编码方式，它们也比原始 jpeg 略小。

您可以使用 提供的这个命令行工具来检查 JPEG 图像是否是渐进式的。

Addy 很好地总结了使用渐进式 jpeg 的优缺点。对我来说，我觉得利大于弊，所以我坚持使用默认设置。

如果您更喜欢使用原始 jpeg，您可以在对象中设置为 false。另外，请确保 - 版本发生变化，请重新检查相应的文档。

PNG（PNG-8 与 PNG-24)PNG 的优缺点

PNG（便携式网络图形格式）是一种无损压缩的高保真图像格式。 8 和 24，这里是二进制数的数字。根据我们的必备知识中提到的对应关系，8位PNG最多支持256种颜色，而24位PNG可以呈现大约1600万种颜色。

PNG图片比JPG具有更强的色彩表现力，对线条的处理更细腻，对透明度有很好的支持。它弥补了我们上面提到的JPG的局限性，唯一的缺点就是体积太大了。

PNG应用场景

前面我们提到，如果用PNG来处理复杂多彩的图片，成本会比较高。以 JPG 格式保存。

考虑到PNG在处理线条和颜色对比方面的优势，我们主要用它来呈现颜色简单、对比强烈的小logo、图片或背景。

使用优化的 PNG 图片

是我优化PNG图像的首选工具，您可以使用它-

npm install imagemin-pngquant

然后将以下内容添加到 .js 文件中：

const imageminPngquant = require('imagemin-pngquant');
const optimisePNGImages = () =>
  imagemin([PNGImages], output, {
    plugins: [
      imageminPngquant({ quality: '65-80' })
    ],
  });
optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .catch(error => console.log(error));

我发现设置为 65-80 可以很好地平衡文件大小和图像质量方案。

通过这些设置，我可以从 913kb 到 187kb 获得我网站的屏幕截图，而没有任何明显的视觉损失，惊人的 79% 下降！

这里有两个文件。自己看看并判断：

好处

WebP像JPEG一样处理细节图像，像PNG一样支持透明度，像GIF一样支持GIF 可以显示动态图像——它结合了多种图像文件格式的优点。

官方对WebP的介绍在这一点上比较权威：

与 PNG 相比，WebP 无损图像的尺寸缩小了 26%。在同等 SSIM 质量指数下，WebP 有损图像比可比较的 JPEG 图像小 25-34%。无损 WebP 仅支持 22% 额外字节的透明度（也称为 alpha 通道）。有损 WebP 还支持有损 RGB 压缩可接受的情况下的透明度，通常提供 3 倍于 PNG 的文件大小。将 WebP 图像提供给支持它们的浏览器

WebP 是 引入的一种相对较新的格式，其目标是通过将图像编码为无损和有损格式来提供更小的文件大小，使其成为 JPEG 和 PNG 的良好替代品。

WebP 图像的清晰度通常可与 JPEG 和 PNG 相媲美，但文件大小要小得多。例如，当我将上面的屏幕截图转换为 WebP 时，我得到了一个 88kb 的文件，其质量与原始 913kb 图像的质量相同，减少了 90%！

看看这三张图，你能看出区别吗？

我个人认为视觉效果相当，尺寸节省也不容忽视。

既然我们已经认识到尽可能使用 WebP 格式的价值，重要的是它不能完全替代 JPEG 和 PNG，因为浏览器对 WebP 的支持并不广泛。

在撰写本文时， 、 和 Edge 都是不支持 WebP 的浏览器。

但是，根据来自 的数据，全球超过 70% 的用户使用支持 WebP 的浏览器。这意味着大约 70% 的客户可以通过使用 WebP 图像获得更快的网页和更好的体验。

要安装它，请运行以下命令：

npm install imagemin-webp

然后将以下内容添加到您的 .js 文件中：

const imageminWebp = require('imagemin-webp');
const convertPNGToWebp = () =>
  imagemin([PNGImages], output, {
    use: [
      imageminWebp({
        quality: 85,
      }),
    ]
  });
const convertJPGToWebp = () =>
  imagemin([JPGImages], output, {
    use: [
      imageminWebp({
        quality: 75,
      }),
    ]
  });
optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .then(() => convertPNGToWebp())
  .then(() => convertJPGToWebp())
  .catch(error => console.log(error));

我发现将其设置为 85 会生成与 PNG 质量相当的 WebP 图像，但要小得多。对于 jpeg，我发现设置为 75 可以很好地平衡视觉效果和文件大小。

以 HTML 格式提供 WebP 图像

拥有 WebP 图像后，您可以使用以下标记将它们提供给可以使用它们的浏览器，以及不符合 WebP 的 png 或 jpeg 的浏览器。

有了这个标签网站优化，理解 image/webp 媒体类型的浏览器会下载 Webp 图像并显示它，而其他浏览器会下载 JPEG 图像。

任何不支持的浏览器

将跳过所有标签并加载底部的 img 标签。因此，我们通过提供对所有浏览器类的支持来逐步增强我们的页面。

请注意，在所有情况下，img 标记都是实际呈现到页面的内容，因此它确实是语法的必需部分。如果省略 img 标签，则不会渲染任何图像。

标签和其中定义的所有标签都在那里，以便浏览器可以选择要使用的图像的路径。当源图像被选中时，它的 URL 被传递给 img 标签，这就是显示的内容。

这意味着您不需要设置样式

或标签，因为浏览器不会呈现这些标签。所以你可以像以前一样继续使用 img 标签进行样式设置。

总结

如您所见，优化网页图片的过程并不复杂，可以通过减少页面加载时间为客户带来更好的用户体验，希望本文对您有所帮助，共同进步！

代码部署后可能出现的bug无法实时知晓。之后为了解决这些bug，大量的时间都花在了日志调试上。顺便推荐一个有用的bug监控工具。

原文：

你的点赞是我继续分享好东西的动力，请点赞！

通讯

系列干货总结如下，如果觉得不错，点个star，欢迎进群互相学习。

我是小智，公众号“感动世界”作者，前端技术爱好者。会经常分享自己学过看过的干货，在进阶的路上互相鼓励！